<template>
  <div class="main-content">
   <div style="display: flex; grid-gap: 10px; align-items: flex-start;">
    <div style="flex: 1" class="card">
      <div v-for="comment in commentsList"
           :key="comment.commentId"
           class="comment-item">
        <div class="comment-header" @click="goDetail(comment.postId)">
          <span class="comment-content">{{ comment.content }}</span>
          <div :class="{'hide-image-box': !comment.forumPosts.imageUrl}" style="width:100px" >
            <img :src="comment.forumPosts.imageUrl"  v-if="comment.forumPosts.imageUrl" style="width: 100%; height:91px; border-radius: 5px;" alt="Post Image" />
          </div>
        </div>
        <span class="comment-date">{{ comment.createdAt}}</span>
      </div>
      <div v-if="total===0" style="padding: 29px 0; text-align: center;font-size: 16px; color: #666">暂无数据</div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryCommentParams.pageNum"
        :limit.sync="queryCommentParams.pageSize"
        @pagination="getList"
      />
    </div>
   </div>
  </div>
</template>

<script>
import {queryById} from "@/api/forum/comments";

export default {
  name: "CommentList",
  created() {
    this.getList();
  },
  data(){
    return{
      // 查询评论参数
      queryCommentParams: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        postId: null,
        userId: null,
        content: null,
        createdAt: null,
        updatedAt: null,
        parentCommentId: null,
        status: null,
        userName: null,
      },
      total:0,
      loading:false,
      commentsList: [],
    }
  },
  methods:{
    getList(){
      this.queryCommentParams.userId= this.$route.params.userId; // 1
      if (!this.queryCommentParams.userId && this.queryCommentParams.userId !== 0) {
        console.error('userId 不存在，请检查路由参数');
        return;
      }
      console.log("queryCommentParams",this.queryCommentParams)
      queryById(this.queryCommentParams).then((response) => {
        this.commentsList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log(this.total)
        console.log("response", response)
      })
    },
    // 跳转到帖子详情页
    goDetail(id) {
      if (!id) {
        console.error("帖子ID不能为空");
        this.$message.warning("帖子ID不能为空");
        return;
      }
      // 使用catch捕获重复导航错误
      this.$router
        .push({
          name: "detail",
          params: {id: id.toString()},
        })
        .then(() => {
          console.log("跳转成功!");
        })
        .catch((err) => {
          // 如果是重复导航错误，则忽略
          if (err.name === "NavigationDuplicated") {
            console.log("重复导航被忽略");
            return;
          }
          // 其他错误则抛出
          console.error("路由跳转错误:", err);
          this.$message.error(`跳转失败: ${err.message}`);
        });
    },
  }
};
</script>

<style scoped>
/*页面具体样式*/
.main-content{
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.comment-item {
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}


.comment-date {
  color: #999;
}

.comment-content {
  margin-bottom: 5px;
}

div .card {
   width: 50%;
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 2px 6px rgba(0,0,0,.1);
   padding: 15px;}
</style>
